Buttons
There are 3 main button types described in material design. Raised Button, Floating circular action button & Flat buttons.
Flat button
Default
With colors
With icons
<!-- Flat button with ripple effect -->
<mdl-button>Button</mdl-button>
<!-- Ripple effect disable-->
<mdl-button ripple="false">Button</mdl-button>
<!-- Button disable-->
<mdl-button disabled>Button</mdl-button>
<!-- Button with primary color-->
<mdl-button color="@ButtonColors.Primary">Button</mdl-button>
<!-- Button with primary color-->
<mdl-button color="@ButtonColors.Accent">Button</mdl-button>
Raised button
Default
With colors
With icons
<!-- Raised button with ripple effect -->
<mdl-button raised="true">Button</mdl-button>
<!-- Ripple effect disable-->
<mdl-button raised="true" ripple="false">Button</mdl-button>
<!-- Button disable-->
<mdl-button raised="true" disabled>Button</mdl-button>
<!-- Button with primary color-->
<mdl-button raised="true" color="@ButtonColors.Primary">Button</mdl-button>
<!-- Button with primary color-->
<mdl-button raised="true" color="@ButtonColors.Accent">Button</mdl-button>
Icon buttons
Default
With colors
With background colors
<!-- Icon button with ripple effect -->
<mdl-button icon="true"><mdl-icon icon="@MDLIcons.add"></mdl-icon></mdl-button>
<!-- Ripple effect disable-->
<mdl-button icon="true" ripple="false"><mdl-icon icon="@MDLIcons.image"></mdl-icon></mdl-button>
<!-- Button disable-->
<mdl-button icon="true" disabled><mdl-icon icon="@MDLIcons.smartphone"></mdl-icon></mdl-button>
<!-- Button with primary color-->
<mdl-button icon="true" color="@ButtonColors.Primary"><mdl-icon icon="@MDLIcons.mood"></mdl-icon></mdl-button>
<!-- Button with primary color-->
<mdl-button icon="true" color="@ButtonColors.Accent"><mdl-icon icon="@MDLIcons.mood_bad"></mdl-icon></mdl-button>
FAB button
Default
With colors
With background colors
Mini
<!-- FAB button with ripple effect -->
<mdl-button fab="true"><mdl-icon icon="@MDLIcons.add"></mdl-icon></mdl-button>
<!-- Ripple effect disable-->
<mdl-button fab="true" ripple="false"><mdl-icon icon="@MDLIcons.image"></mdl-icon></mdl-button>
<!-- Button disable-->
<mdl-button fab="true" disabled><mdl-icon icon="@MDLIcons.smartphone"></mdl-icon></mdl-button>
<!-- Button with primary color-->
<mdl-button fab="true" color="@ButtonColors.Primary"><mdl-icon icon="@MDLIcons.mood"></mdl-icon></mdl-button>
<!-- Button with primary color-->
<mdl-button fab="true" color="@ButtonColors.Accent"><mdl-icon icon="@MDLIcons.mood_bad"></mdl-icon></mdl-button>
<!-- Mini FAB Button-->
<mdl-button fab="true" color="@ButtonColors.Accent"><mdl-icon icon="@MDLIcons.mood_bad"></mdl-icon></mdl-button>